﻿@{
    ViewData["Title"] = "Alerts";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="@Url.Action("Index", "Dashboard")">Dashboard</a></li>
                    <li>
                        <span>Interface</span>
                    </li>
                    <li class="active">
                        <span>Alerts</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Alerts
            </h2>
            <small>Notification and custom alerts</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row">
        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Sweet alert
                </div>
                <div class="panel-body">
                    <p>
                        Sweet Alert is a beautiful replacement for standard Javascript's "Alert".
                    </p>
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>
                                    Examples
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    A basic message
                                </td>
                                <td>
                                    <button class="btn btn-primary btn-sm demo1">Run example</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    A success message!
                                </td>
                                <td>
                                    <button class="btn btn-success btn-sm demo2">Run example</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    A warning message, with a function attached to the "Confirm"-button
                                </td>
                                <td>
                                    <button class="btn btn-warning btn-sm demo3">Run example</button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ... and by passing a parameter, you can execute something else for "Cancel".
                                </td>
                                <td>
                                    <button class="btn btn-danger btn-sm demo4">Run example</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="m-t-md">
                        <p>
                            You can easy add sweet alert in your controller by adding code like this:
                        </p>
                        <pre>
swal({
    title: "Good job!",
    text: "You clicked the button!",
    type: "success"
});</pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="hpanel">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                        <a class="closebox"><i class="fa fa-times"></i></a>
                    </div>
                    Toastr notification
                </div>
                <div class="panel-body">
                    <p>
                        Minimalistic and extensible notification service for Homer theme.
                    </p>

                    <div class="text-center float-e-margins">
                        <div class="font-bold m">Example with Homer template</div>
                        <button class="homerDemo1 btn btn-info btn-sm">Run example</button>
                        <button class="homerDemo2 btn btn-success btn-sm">Run example</button>
                        <button class="homerDemo3 btn btn-warning btn-sm">Run example</button>
                        <button class="homerDemo4 btn btn-danger btn-sm">Run example</button>
                    </div>

                    <div class="m-t-md">
                        <p>
                            You can easy add any notification in your scripts by adding code like this:
                        </p>
                        <pre>
Command: toastr["success"]("Example message ", "Example title")
toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-center",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
} </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@section Styles {
    <environment names="Development,Staging,Production">
        <link rel="stylesheet" href="~/lib/sweetalert/dist/sweetalert.css" />
        <link rel="stylesheet" href="~/lib/toastr/toastr.min.css" />
    </environment>
}

@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/sweetalert/dist/sweetalert.min.js"></script>
        <script src="~/lib/toastr/toastr.min.js"></script>
    </environment>

    <script type="text/javascript">

        $(function () {

            $('.demo1').click(function () {
                swal({
                    title: "Welcome in Alerts",
                    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                });
            });

            $('.demo2').click(function () {
                swal({
                    title: "Good job!",
                    text: "You clicked the button!",
                    type: "success"
                });
            });

            $('.demo3').click(function () {
                swal({
                    title: "Are you sure?",
                    text: "Your will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!"
                },
                        function () {
                            swal("Booyah!");
                        });
            });

            $('.demo4').click(function () {
                swal({
                    title: "Are you sure?",
                    text: "Your will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                },
                        function (isConfirm) {
                            if (isConfirm) {
                                swal("Deleted!", "Your imaginary file has been deleted.", "success");
                            } else {
                                swal("Cancelled", "Your imaginary file is safe :)", "error");
                            }
                        });
            });

            // Toastr options
            toastr.options = {
                "debug": false,
                "newestOnTop": false,
                "positionClass": "toast-top-center",
                "closeButton": true,
                "debug": false,
                "toastClass": "animated fadeInDown",
            };

            $('.homerDemo1').click(function () {
                toastr.info('Info - This is a custom Homer info notification');
            });

            $('.homerDemo2').click(function () {
                toastr.success('Success - This is a Homer success notification');
            });

            $('.homerDemo3').click(function () {
                toastr.warning('Warning - This is a Homer warning notification');
            });

            $('.homerDemo4').click(function () {
                toastr.error('Error - This is a Homer error notification');
            });

        });
    </script>
}
